<template>
  <div class="msg-wrap">
    <h1 class="title">
      留言板
    </h1>
    <hr class="hr-class">
    <h2 class="title-desc">
      欢迎大家留言评论~
    </h2>

    发表留言
    <div class="comment-wrap">
      <TextareaInputCpt @content-change="contentChange" />
      <div
        v-if="frontendData && frontendData.frontend"
        class="btn"
      >
        <el-button
          type="primary"
          :loading="submitCommentLoading"
          :disabled="frontendData.frontend.frontend_comment === -1"
          @click="addComment"
        >
          发表留言
        </el-button>
      </div>
    </div>

    <SkeletonCpt v-if="hasMore && !commentList.length" />
    <!-- 评论组件 -->
    <CommentCpt
      v-loading="isLoading"
      :list="commentList"
      :total="total"
      :sort="sort"
      :has-more="hasMore"
      :now-page="nowPage"
      :page-size="pageSize"
      :children-page-size="childrenPageSize"
      @refresh="refreshCommentList"
      @sort-change="sortChange"
      @handle-parent-page="handleParentPage"
      @handle-children-page="handleChildrenPage"
    />
  </div>
</template>

<script lang="ts">
import CommentCpt from '@/components/Comment/index.vue'
import TextareaInputCpt from '@/components/TextareaInput/index.vue'
import SkeletonCpt from '@/components/Skeleton.vue'
import { appStore } from '@/store/app'
import { userStore } from '@/store/user'
import { commentStore } from '@/store/comment'
import { InitData } from '@/types/msg'
import { defineComponent, inject, reactive, toRefs, computed, watch, onMounted } from 'vue'

export default defineComponent({
  name: 'ArticleView',
  components: {
    CommentCpt,
    TextareaInputCpt,
    SkeletonCpt
  },
  setup () {
    const app = appStore()
    const user = userStore()
    const comment = commentStore()

    const $get:any = inject('$get')
    const $post:any = inject('$post')
    const $newmessage:any = inject('$newmessage')

    const data = reactive(new InitData())

    const frontendData:any = computed(() => {
      return app.frontendData
    })

    const childrenPageSize = computed(() => {
      return comment.childrenPageSize
    })

    watch(() => user.userInfo, async (newVal, oldVal) => {
      await refreshCommentList()
    })

    // 页面加载时
    onMounted(async () => {
      document.title = '留言 - 小锅锅·博客'
      await refreshCommentList()
    })

    const contentChange = (newVal:string) => {
      data.commentContent = newVal
    }

    // 新增回复
    const addComment = async () => {
      if (!user.userInfo) {
        $newmessage('暂未登录，请登录!', 'warning')
        return
      }
      if (data.commentContent.length < 5) {
        $newmessage('评论内容至少5个字符~', 'warning')
        return
      }
      try {
        data.submitCommentLoading = true
        await $post('comment/create', {
          article_id: -1,
          content: data.commentContent,
          parent_comment_id: -1,
          reply_comment_id: -1,
          to_user_id: -1
        })
        data.submitCommentLoading = false
        $newmessage('评论成功~', 'success')
        refreshCommentList()
      } catch (error) {
        console.log(error)
        data.submitCommentLoading = false
      }
    }
    const sortChange = (sort:string) => {
      data.sort = sort
      refreshCommentList()
    }
    // 留言列表
    const refreshCommentList = async () => {
      const query = {
        article_id: -1,
        nowPage: 1,
        pageSize: 10,
        childrenPageSize: comment.childrenPageSize,
        orderName: data.sort === 'date' ? 'created_at' : 'star_total',
        orderBy: 'desc'
      }
      try {
        data.isLoading = true
        const commentData = await $get('comment/comment', { ...query })
        data.isLoading = false
        data.commentList = commentData.rows
        data.total = commentData.total
        data.hasMore = commentData.hasMore
      } catch (error) {
        console.log(error)
        data.isLoading = false
      }
    }

    // 获取子评论分页
    const handleChildrenPage = async (query:any) => {
      try {
        const childrenData = await $get('comment/comment_children', {
          params: {
            parent_comment_id: query.parent_comment_id,
            article_id: query.article_id,
            pageSize: query.childrenPageSize,
            childrenPageSize: comment.childrenPageSize
          }
        })
        data.commentList.forEach((item:any) => {
          if (item.id === query.parent_comment_id) {
            item.children_comment.push(...childrenData.rows)
          }
        })
      } catch (error) {
        console.log(error)
      }
    }
    // 获取父评论分页
    const handleParentPage = async (query:any) => {
      try {
        const commentData = await $get('comment/comment', {
          article_id: -1,
          nowPage: query.nowPage + 1,
          pageSize: data.pageSize,
          childrenPageSize: comment.childrenPageSize,
          orderName: query.orderName,
          orderBy: query.orderBy
        })
        data.commentList.push(...commentData.rows)
        data.hasMore = commentData.hasMore
      } catch (error) {
        console.log(error)
      }
    }

    const dataRef = toRefs(data)
    return {
      ...dataRef, frontendData, childrenPageSize, contentChange, addComment, sortChange, refreshCommentList, handleChildrenPage, handleParentPage
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/css/constant.scss';
@import '@/assets/css/mixin.scss';

.msg-wrap {
  .title {
    display: block;
    text-align: center;
  }
  .title-desc {
    display: block;
    text-align: center;
  }
  .comment-wrap {
    .btn {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
